<template>
	<view>

		<view class="active_info" v-if="info">
			<view class="num_area FlexBetween" v-if="info.join_info">
				<view class="narea_item FlexColumn">
					<view class="num">
						{{info.join_info.been_rebate_times || '0'}}
					</view>
					<view class="tit">{{$zhTran('已返利次数')}}</view>
				</view>
				<view class="narea_item FlexColumn">
					<view class="num">
						{{info.join_info.rebate_times - info.join_info.been_rebate_times || 0}}
					</view>
					<view class="tit">
						{{$zhTran('剩余返利次数')}}
					</view>
				</view>
				<view class="narea_item FlexColumn">
					<view class="num">
						{{info.join_info.rebate_amount || '0'}}
					</view>
					<view class="tit">
						{{$zhTran('累计返利金额')}}
					</view>
				</view>
			</view>

			<div class="txt_area">
				<div class="txt_line FlexBetween" v-for="(item, index) in tlinelist">
					<div class="tit">
						{{item.title || ''}}
					</div>
					<div class="vals">
						{{item.value || '-'}}
					</div>
				</div>
			</div>


		</view>

	</view>
</template>

<script>
	export default {
		name: '',
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		components: {

		},
		watch: {
			info() {
				this.setList()
			}
		},
		created() {
			this.setList()
		},
		methods: {
			setList() {
				if (!this.info) return;
				let obj = JSON.parse(JSON.stringify(this.info))
				this.tlinelist = [{
						title: '活动编号',
						value: obj.sn || '',
					},
					{
						title: '分享次数',
						value: obj.join_info ? obj.join_info.share_times : '',
					},
					{
						title: '浏览次数',
						value: obj.join_info ? obj.join_info.visit : '',
					},
					{
						title: '活动订单',
						value: obj.order_count || '',
					},
					{
						title: '活动销售额',
						value: obj.order_amount || '',
					},
					{
						title: '活动销量',
						value: obj.sell_num || '',
					},
					{
						title: '活动进度',
						value: obj.activity_progress || '',
					},
					{
						title: '活动状态',
						value: obj.status_desc || '',
					},
					{
						title: '活动开始时间',
						value: obj.start_time_desc || '',
					},
					{
						title: '活动结束时间',
						value: obj.end_time_desc || '',
					},
				]

				this.tlinelist = this.$zhTran(this.tlinelist)
			},
		},
		data() {
			return {
				tlinelist: [],
			}
		},
	}
</script>

<style lang="scss" scoped>
	.active_info {
		width: 100%;
		padding: 50rpx 36rpx;
		// border:solid 1px red;
		background: #fff;

		.num_area {
			width: 100%;

			margin-bottom: 40rpx;

			.narea_item {
				width: 204rpx;
				height: 162rpx;
				border-radius: 8rpx;
				background: rgba(242, 246, 255, 1);

				.num {
					font-size: 32rpx;
					font-weight: 550;
					color: rgba(64, 115, 250, 1);
					text-align: center;
					vertical-align: top;
					margin-bottom: 18rpx;
				}

				.tit {
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);
					text-align: center;
					vertical-align: top;

				}
			}
		}

		.txt_area {
			.txt_line {
				margin-bottom: 35rpx;

				.tit {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					text-align: left;
					vertical-align: top;
				}

				.vals {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);
					text-align: right;
					vertical-align: top;
					max-width: 50vw;
				}
			}
		}
	}
</style>